<template>
    <div style="float: left; margin-top: 10px; margin-left: 16px;width: 200px;">
        <el-text size="large">id：</el-text>
        <el-input class="input2" v-model="problemRecordParm.problemId" @change="getProblemRecord" :placeholder="$t('problemView.searchInput')" />
    </div>

    <div style="float: left; margin-top: 25px;"><el-text size="large">{{ $t('problemView.search') }}</el-text></div>
    <el-input class="input" v-model="problemRecordParm.problemDescribe" @change="getProblemRecord" :placeholder="$t('problemView.searchInput')"  />

    <el-dropdown placement="bottom" style="margin-left: 15px; margin-top: 20px;">
        <el-button class="buttom"> {{ $t('problemView.result') }}<el-icon><ArrowDown /></el-icon></el-button>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item @click="problemRecordParm.isRight=null,getProblemRecord()">{{ $t('enum.all') }}</el-dropdown-item>
                <el-dropdown-item @click="problemRecordParm.isRight=true,getProblemRecord()">{{ $t('textView.right') }}</el-dropdown-item>
                <el-dropdown-item @click="problemRecordParm.isRight=false,getProblemRecord()">{{ $t('textView.wrong') }}</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
    <el-table style="cursor: pointer;" :data="problemRecord?.items" :row-class-name="getTableRowClassName" @row-click="handleRowClick2">
        <el-table-column prop="problemId" label="题目id" width="100" />
        <el-table-column prop="problemDescribe" show-overflow-tooltip label="题目描述" width="500" />
        <el-table-column prop="input" show-overflow-tooltip label="你的答案" width="250" />
        <el-table-column label="结果" width="100">  
            <template #default="scope">  
                <span>{{ scope.row.result ? '正确' : '错误' }}</span>  
            </template>  
        </el-table-column>

        <el-table-column prop="createTime" label="时间" width="180" />
    </el-table>

    <div class="pagination"><el-pagination layout="prev, pager, next" :page-size="problemRecordParm.pageSize" :current-page="problemRecordParm.pageNo" :total="problemRecord.counts" @current-change="handlePageChange"/></div>


    <problemDetailView v-if="showProblemDetail" :showProblemDetail="showProblemDetail" :chooseProblem2="chooseProblem" @update:someProp="showProblemDetail = $event"/>
</template>



<script setup lang="ts">
    import {onMounted} from 'vue'
    import useTest from '@/hooks/useTest';
    import useProblem from '@/hooks/useProblem';
    import problemDetailView from '@/views/problems/son/problemDetailView.vue';
    const {showProblemDetail,chooseProblem,handleRowClick2}=useProblem();
    const {problemRecordParm,problemRecord,getTableRowClassName,handlePageChange,getProblemRecord} = useTest()

    onMounted(()=>{
        getProblemRecord()
    })
</script>

<style>

    .el-table .wrong-row {
        --el-table-tr-bg-color: var(--el-color-danger-light-9);
    }
    .el-table .right-row {
        --el-table-tr-bg-color: var(--el-color-success-light-9);
    }

</style>

<style scoped>
    .pagination {
        margin-top: 10px;
        display: flex;  
        justify-content: center;
    }
    .input{
        margin-top: 20px;
        margin-left: 10px;
        margin-bottom: 10px;
        width: 20%;
    }

    .input2{
        margin-top: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        width: 70%;
        height: 30px;
    }

</style>